<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <title>Title</title>
    <style type="text/css">
        .bill-table {
            height: 350px;
            width: 900px;
            margin: 0 auto;
        }

        .bill-statistics {
            height: 400px;
            width: 900px;
            margin: 0 auto;
        }
    </style>
</head>

<body>

<div class="bill-table">
    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
           class="layui-input">
    <div id="billTable"></div>
</div>

<div class="bill-statistics" id="billStatistics">

</div>

</body>



<script src="../static/js/jquery.js" th:src="@{/js/jquery.js}"></script>
<script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script src="../static/echarts/echarts.min.js" th:src="@{/echarts/echarts.min.js}"></script>

<script type="text/javascript" th:inline="none">
    initTable();
    parseLineData();
    /**
     * 请求、解析、加载折线图数据
     */
    function parseLineData() {
        $.ajax(
            {
                "url":"/dcits/get/line/data",
                "type":"get",
                "success":function (result) {
                    var rtnCode = result.rtnCode;
                    if(rtnCode == '0'){
                        var dataIn = result.bean.dataIn;
                        var dataOut = result.bean.dataOut;
                        var xAxisdata = result.bean.dateList;
                        var legenddata = ['收入','支出'];
                        var seriesdata = [
                            {
                                name: '收入',
                                type: 'line',
                                stack: '总量',
                                data: dataIn
                            },
                            {
                                name: '支出',
                                type: 'line',
                                stack: '总量',
                                data: dataOut
                            }
                        ];
                        initLine(legenddata, xAxisdata, seriesdata);
                    }else {
                        whenLineError();
                    }
                },
                "error":function (result) {
                    whenLineError();
                }
            }
        );
    }
    /**
     * 当折线图数据因为某些原因请求失败时初始化一个默认的全0数据加载上去
     */
    function whenLineError() {
        var legenddata = ['收入', '支出'];
        var xAxisdata = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        var seriesdata = [
            {
                name: '收入',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '支出',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310]
            }
        ];
        initLine(legenddata, xAxisdata, seriesdata);
    }
    /**
     * 加载表格
     */
    function initTable() {
        var key = $('#in').val();
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#billTable',
                title: '流水信息',
                height: 350,
                width: 900,
                url: '/dcits/bill/list',
                request: {
                    pageName: 'pageNum',
                    limitName: 'pageSize',
                },
                headers: {
                    keyword: key
                },
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.rtnCode, //解析接口状态
                        "msg": res.rtnMsg, //解析提示文本
                        "count": res.bean.total, //解析数据长度
                        "data": res.beans //解析数据列表
                    }
                },
                page: true,
                cols: [[
                    {field: 'balance', title: '金额', width: 80, sort: true, fixed: 'left'},
                    {field: 'balanceUnit', title: '货币单位', width: 80},
                    {field: 'recipientId', title: '对方账户', width: 80, sort: true},
                    {field: 'reason', title: '商品说明', width: 80},
                    {field: 'mean', title: '支付方式', width: 177},
                    {field: 'meanCode', title: '账号', width: 80, sort: true},
                    {field: 'billCode', title: '流水号', width: 80, sort: true},
                    {field: 'remark', title: '备注', width: 80},
                    {field: 'crtTime', title: '创建时间', width: 135, sort: true}
                ]]
            });
        });
    }
    /**
     *
     * @param legenddata 折线图内部统计什么维度 例如：收入  住处  字符串型数组
     * @param xAxisdata 折线图横坐标选项数组
     * @param seriesdata  折线图数据，理论上是二维数组 legenddata x xAxisdata
     */
    function initLine(legenddata, xAxisdata, seriesdata) {
        var dom = document.getElementById("billStatistics");
        var myChart = echarts.init(dom);
        option = null;
        option = {
            title: {
                text: '近一周收支统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legenddata
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxisdata
            },
            yAxis: {
                type: 'value'
            },
            series: seriesdata
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
</script>
</html>